<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="~{fragment/headFragment :: head}"></div>

<body class="cbp-spmenu-push">
<div class="main-content">


    <div th:replace="~{fragment/left-border :: left}"></div>

    <div th:replace="~{fragment/header :: header}"></div>

    <!-- //header-ends -->
    <!-- main content start-->
    <div id="page-wrapper">
        <div class="main-page">
            <div class="row-one">

                <div class="clearfix"> </div>
            </div>
            <!--            <div class="charts">-->
            <!--                <div class="col-md-4 charts-grids widget">-->
            <!--                    <h4 class="title">Bar Chart Example</h4>-->
            <!--                    <canvas id="bar" height="300" width="400"> </canvas>-->
            <!--                </div>-->
            <div class="col-md-4 charts-grids widget" style="height: 36em;width:40%;margin:50px 25px 25px 50px;">
                <h4 class="title" style="color: red">工作质量总览：</h4>
                <canvas id="bar" height="300" width="400" style="width: 400px; height: 300px;"></canvas>
            </div>
            <div class="col-md-4 charts-grids widget states-mdl" style="height: 36em;width:40%;margin:50px 25px 25px 50px;" >
                <h4 class="title" style="color: red">个人最高工作量总览：</h4>
                <canvas id="line" height="300" width="400" style="width: 400px; height: 300px;"> </canvas>
            </div>

            <div class="col-md-4 charts-grids widget" style="height: 36em;width:40%;margin:50px 25px 25px 50px;">
                <h4 class="title" style="color: red">各平台访问人数及占有比例：</h4>
                <canvas id="pie" height="300" width="400"> </canvas>
            </div>
            <div class="col-md-4 charts-grids widget states-mdl" style="height: 36em;width:40%;margin:50px 25px 25px 50px;">
                <h4 class="title" style="color: red">考勤最高时长统计：</h4>
                <canvas id="line1" height="300" width="400"> </canvas>
            </div>
            <div class="clearfix"> </div>
            <script th:inline="javascript">

                <!-- 导入controller的各个数据 -->
                var sumeffsess =/*[[${sumeffsess}]]*/;
                var sumresolve =/*[[${sumresolve}]]*/;
                var sumnosolve =/*[[${sumnosolve}]]*/;
                var sumgood =/*[[${sumgood}]]*/;
                var summedium =/*[[${summedium}]]*/;
                var sumbad =/*[[${sumbad}]]*/;
                var sumno =/*[[${sumno}]]*/;

                var toMe =/*[[${toMe}]]*/;
                var toSeCount =/*[[${toSeCount}]]*/;
                var toEffSe =/*[[${toEff}]]*/;
                var toEnd =/*[[${toEnd}]]*/;
                var toSeTime =/*[[${toSeTime}]]*/;

                var weixin =/*[[${weixin.getVisitorcount()}]]*/;
                var phoneapp =/*[[${phoneapp.getVisitorcount()}]]*/;
                var wangye =/*[[${wangye.getVisitorcount()}]]*/;
                var weixingz =/*[[${weixingz.getVisitorcount()}]]*/;
                var weibo =/*[[${weibo.getVisitorcount()}]]*/;
                var toutiao =/*[[${toutiao.getVisitorcount()}]]*/;

                var maxLogin =/*[[${maxLogin}]]*/;
                var maxFree =/*[[${maxFree}]]*/;
                var maxBusy =/*[[${maxBusy}]]*/;
                var maxOnline =/*[[${maxOnline}]]*/;
                var maxOffline =/*[[${maxOffline}]]*/;


                //工作质量柱状图
                var barChartData = {
                    labels : ["有效会话总数","已处理总数","未处理总数","好评总数","中评总数","差评总数","未评价总数"],
                    datasets : [

                        {
                            fillColor : "rgba(242, 179, 63, 1)",
                            strokeColor : "#585858",
                            highlightFill: "#585858",
                            data : [sumeffsess,sumresolve,sumnosolve,sumgood,summedium,sumbad,sumno]
                        }
                    ]

                };
                var lineChartData = {
                    labels : ["","总消息数","总会话数","总有效会话数","总完成会话数","总会话时间",""],
                    datasets : [

                        {
                            fillColor : "rgba(51, 51, 51, 0)",
                            strokeColor : "#e94e02",
                            pointColor : "#e94e02",
                            pointStrokeColor : "#fff",
                            data : [0,toMe,toSeCount,toEffSe,toEnd,toSeTime,0]
                        }
                    ]

                };
                var pieData = [
                    {
                        value: weixin,
                        color:"rgba(233, 78, 2, 1)",
                        label: "微信小程序"
                    },
                    {
                        value: phoneapp,
                        color:"rgb(179,0,255)",
                        label: "手机App"
                    },
                    {
                        value: wangye,
                        color:"rgb(12,41,234)",
                        label: "网页"
                    },
                    {
                        value : weixingz,
                        color : "rgba(242, 179, 63, 1)",
                        label: "微信工作号"
                    },
                    {
                        value : weibo,
                        color : "rgb(59,51,51)",
                        label: "微博"
                    },
                    {
                        value : toutiao,
                        color : "rgb(79,174,186)",
                        label: "头条号"
                    }

                ];

                var lineChartData1 = {
                    labels : ["","登录时长","空闲时长","工作时长","在线时长","离线时长",""],
                    datasets : [

                        {
                            fillColor : "rgba(97, 100, 193, 1)",
                            strokeColor : "#6164C1",
                            pointColor : "rgba(97, 100, 193,1)",
                            pointStrokeColor : "#9358ac",
                            data : [0,maxLogin,maxFree,maxBusy,maxOnline,maxOffline,0]

                        }
                    ]

                };
                new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
                new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
                new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);
                new Chart(document.getElementById("line1").getContext("2d")).Line(lineChartData1);

            </script>

        </div>



    </div>
</div>

</div>
<!-- Classie -->
<script src="js/classie.js"></script>
<script>
    var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
        showLeftPush = document.getElementById( 'showLeftPush' ),
        body = document.body;

    showLeftPush.onclick = function() {
        classie.toggle( this, 'active' );
        classie.toggle( body, 'cbp-spmenu-push-toright' );
        classie.toggle( menuLeft, 'cbp-spmenu-open' );
        disableOther( 'showLeftPush' );
    };


    function disableOther( button ) {
        if( button !== 'showLeftPush' ) {
            classie.toggle( showLeftPush, 'disabled' );
        }
    }
</script>
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"> </script>
</body>
</html>